<template>
  <div class="personalInformation">
    <el-card shadow="never" class="box-card HeadPortrait">
      <div slot="header" class="clearfix">
        <div class="HeadPortrait-phone">
          <el-avatar
            class="f-l"
            :size="80"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
          <span class="f-l">18368015236</span>
        </div>
        <div class="HeadPortrait-Information f-l">
          <button>修改密码</button>
          <button>修改密码</button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  methods: {},
  components: {}
};
</script>
<style lang="scss" type="text/css" scoped>
.box-card {
  margin-bottom: 10px;
}
.personalInformation {
  .HeadPortrait {
    .HeadPortrait-phone {
      height: 80px;
      line-height: 80px;
      .f-l {
        margin-right: 10px;
      }
    }
    .fastContent {
      span {
        margin-right: 20px;
      }
    }
    .HeadPortrait-Information {
      height: 80px;
      line-height: 80px;
    }
  }

  .orderInformation {
    .item {
      margin-right: 30px;
    }
  }

  .logistics {
    .item {
      li {
        height: 100px;
      }
      img {
        width: 100px;
      }
      .li-text {
        margin-left: 50px;
        height: 100%;
        width: 500px;

        span {
          display: block;
          width: 500px;
          margin-top: 10px;
          font-size: 14px;
        }
      }

      .li-operation {
        width: 100px;
        margin-left: 0px;
        button {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
